<template>
  <view>
    <u-navbar
      height="50"
      title="视频详情"
      :border-bottom="false"
      title-color="#333"
      title-size="36"
    >
    </u-navbar>
    <view class="layoutView">
      <video
        class="courseVideo"
        id="myVideo"
        :src="videoInfo.video_url"
        :poster="videoInfo.cover_url"
        autoplay
      ></video>
      <view class="courseTitle">{{ videoInfo.title }}</view>
      <view class="courseNumber">
        <text style="margin-right: 20rpx">{{ videoInfo.created_at }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoId: '',
      videoInfo: ''
    }
  },
  onLoad(res) {
    this.videoId = res.id ? res.id : ''
    this.initData()
  },
  onUnload() {},
  methods: {
    initData() {
      let self = this
      self.$u.api.getVideoDetails(this.videoId).then((res) => {
        self.videoInfo = res.data
      })
    }
  }
}
</script>

<style>
@import url('video-details.css');

page {
  background: #f3f5f6;
}
</style>
